<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>绑定表单元素：设置和获取表单元素的值</p>
    <input type="text" v-model="val1">
    <p>输入框的值：{{val1}}</p>
    <hr>
    <textarea v-model="val2" cols="30" rows="10"></textarea>
    <p>文本域的值：{{val2}}</p>
    <hr>
    <span>请选择性别：</span>
    <input type="radio" name="sex" value="nan" v-model="val3"><label for="sex">男</label>
    <input type="radio" name="sex" value="nv" v-model="val3"><label for="sex">女</label>
    <input type="radio" name="sex" value="none" v-model="val3"><label for="sex">保密</label>
    <p>你的性别是：{{val3}}</p>
    <hr>
    <span>请选择爱好：</span>
    <input type="checkbox" name="hobby" value="sing" v-model="val4"><label for="hobby">唱</label>
    <input type="checkbox" name="hobby" value="dance" v-model="val4"><label for="hobby">跳</label>
    <input type="checkbox" name="hobby" value="rap" v-model="val4"><label for="hobby">rap</label>
    <input type="checkbox" name="hobby" value="basketball" v-model="val4"><label for="hobby">打篮球</label>
    <p>你的爱好是：{{val4}}</p>
    <hr>
    <span>收货地址：</span>
    <select name="" v-model="val5">
      <option value="长沙">长沙</option>
      <option value="娄底">娄底</option>
      <option value="3">岳阳</option>
      <option value="4">株洲</option>
      <option value="5">湘潭</option>
    </select>
    <p>你的收货地址是：{{val5}}</p>
    <hr>
    <span>理想城市：</span>
    <select v-model="val6" multiple>
      <option value="长沙">长沙</option>
      <option value="娄底">娄底</option>
      <option value="3">北京</option>
      <option value="4">香港</option>
      <option value="5">杭州</option>
    </select>
    <p>你的理想城市是：{{val6}}</p>
    <hr>
    <hr>
    <hr>
    <span>请选择性别：</span>
    <label v-for="(sex,index) in sexList" :for="sex.value">
      <input
        type="radio"
        :id="sex.value"
        :value="sex.value"
        v-model="val7"
      >
      {{sex.text}}
    </label>
    <p>你的性别是：{{val7}}</p>
    <hr>
    <span>请选择招式：</span>
    <label v-for="item in zhaoShi">
    <input
      type="checkbox"
      name="hobby"
      :value="item.value"
      v-model="val8">
    {{item.text}}</label>
    <p>你的招式是：{{val8}}</p>
    <hr>
    <span>选择地址：</span>
    <select id="" v-model="val9">
      <option v-for="add in addList" :value="add.value">{{add.text}}</option>
    </select>
    <p>你的地址是：{{val9}}</p>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        val1: '',
        val2: '',
        val3: 'none',
        val4: [],
        val5: '',
        val6: [],
        val7: '',
        sexList: [
          {text: '男', value: 'nan'},
          {text: '女', value: 'nv'},
          {text: '保密', value: 'none'},
        ],
        val8: [],
        zhaoShi: [
          {text: '耗子尾汁', value: '1'},
          {text: '有备而来', value: '2'},
          {text: '不讲武德', value: '3'},
          {text: '英国大理石', value: '4'},
          {text: '我没有闪', value: '5'},
        ],
        val9: '',
        addList: [
          {text: '京', value: 1},
          {text: '津', value: 2},
          {text: '沪', value: 3},
          {text: '渝', value: 4},
        ]
      }
    })
  </script>
</body>
</html>